<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/ui-base.css">
    <link rel="stylesheet" href="../css/detail.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/cookie.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        .w {
            width: 1226px;
            margin: 0 auto;
        }

        .tips {
            width: 1226px;
            margin: 0 auto;
        }

        .cl::after {
            content: "";
            display: block;
            clear: both;
            overflow: hidden;
            visibility: hidden;
        }

        .tips a {
            font-size: 14px;
        }


        .wrapAll {
            margin-top: 100px;
            /* background-color: grey; */
        }

        .wrapInner {
            width: 400px;
            height: 400px;
            border: 1px solid #333;
            position: relative;
        }

        .wrapInner img {
            width: 100%;
            height: 100%;
        }

        .shadow {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            display: none;
        }

        .left {
            width: 400px;
            background-color: pink;
            float: left;
            margin-right: 50px;
        }

        .right {
            background-color: pink;
            overflow: hidden;
            min-height: 400px;
            padding: 0 10px;
        }

        .scaleBar {
            width: 400px;
            height: 400px;
            background-color: rgba(122, 255, 255, 0.6);
            position: relative;
            /* overflow: hidden; */
            display: none;
        }

        .scaleBar img {
            position: absolute;
            /* z-index: -1; */
            width: 800px;
            height: 800px;
        }

        .goodsInfo {
            font-size: 12px;
        }

        .goodsInfo .sku-name {
            font-weight: bolder;
            font-size: 16px;
        }

        .goodsInfo>* {
            margin-top: 5px;
        }

        .switchList {
            display: flex;
            margin-top: 10px;
            padding: 5px auto;
        }

        .switchList li {
            flex: 1;
        }

        .switchList li+li {
            margin-left: 10px;
        }

        .switchList li img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="tips">
        <a href="./login.html">请登录</a>
        <a href="./register.html">免费注册</a>
    </div>
    <div class="wrapAll w cl">
        <div class="left">
            <!-- <div class="wrapInner">
                <div class="shadow"></div>
                <img class="smallImg"
                    src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg"
                    alt="">
            </div>
            <ul class="switchList">
                <li><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg   "
                        alt=""></li>
                <li><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg   "
                        alt=""></li>
                <li><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg   "
                        alt=""></li>
                <li><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg   "
                        alt=""></li>
            </ul> -->
        </div>
        <div class="right">
            <!-- <div class="scaleBar">
                <img class="bigImg"
                    src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg"
                    alt="">
            </div>
            <div class="goodsInfo">
                <div class="sku-name">
                    华为 HUAWEI Mate 40 Pro麒麟9000 5G SoC芯片 超感知徕卡电影影像 66W有线超级快充8GB+256GB秋日胡杨5G全网通套餐二（含充电器和数据线）
                </div>
                <div class="summary">
                    京 东 价: <span>￥ 6999.00</span> 降价通知
                </div>
                <div class="wrap-input">
                    <a href="javascript:;" class="reduce">-</a>
                    <input type="number" class="count-input" value="1">
                    <a href="javascript:;" class="add">+</a>
                </div>
                <div class="buyGoods">
                    <button class="addToShoppingCar">加入购物车</button>
                </div>
            </div> -->
        </div>
    </div>
    <div class="goodsDetail w">

    </div>
</body>
<script>
    // lgc 标识用户身份




    $(async function () {
        var tips = document.getElementsByClassName("tips")[0];
        var user = getCookie("lgc");

        // list.html => detail.html => login.html
        // 页面加载时  有用户名就表示用户身份  没有=>去登录
        if (user) {
            tips.innerHTML = `欢迎您,${user} <button onclick="exit()">退出</button>`
        } else {
            location.href = "./login_account.html?returnUrl=" + encodeURIComponent(location.href)
        }

        var url = urlParse();
        console.log(url);
        var { gid } = url;
        if (gid) {
            // searchGoodsByGoodsId({ gid }).then(result => { }).catch(() => { })
            var result = await searchGoodsByGoodsId({ gid });
            console.log(result);
            var { status, msg, data } = result;
            if (status) {
                var { goodsName, goodsImg, goodsPrice, smallPicList, bigPicList, goodsDetail } = data;

                // left  

                var switchListHTML = "";
                smallPicList.forEach((img, index) => {
                    switchListHTML += `<li><img src="https:${img}" bigUrl="${bigPicList[index]}" alt=""></li>`
                })

                $(".wrapAll .left").html(`<div class="wrapInner">
                    <div class="shadow"></div>
                    <img class="smallImg"
                        src="${bigPicList[0]}"
                        alt="">
                </div>
                <ul class="switchList">
                    ${switchListHTML}
                </ul>`);

                // right 
                $(".wrapAll .right").html(`<div class="scaleBar">
                <img class="bigImg"
                    src="${bigPicList[0]}"
                    alt="">
            </div>
            <div class="goodsInfo">
                <div class="sku-name">
                    ${goodsName}
                </div>
                <div class="summary">
                    京 东 价: <span>￥ ${goodsPrice}</span> 降价通知
                </div>
                <div class="wrap-input">
                    <a href="javascript:;" class="reduce">-</a>
                    <input type="number" class="count-input" value="1">
                    <a href="javascript:;" class="add">+</a>
                </div>
                <div class="buyGoods">
                    <button class="addToShoppingCar">加入购物车</button>
                </div>
            </div>`);

                // goodsDetail
                $(".goodsDetail").html(goodsDetail);

                // $(".switchList li").mouseenter(function () {
                //     var index = $(this).index();
                //     var bigUrl = bigPicList[index];
                //     $(".smallImg,.bigImg").prop("src", bigUrl);
                // })

            } else {
                location.href = "./index1.html";
            }
        } else {
            location.href = "./index1.html";
        }


        $(document).on("mouseenter", ".switchList li", function () {
            var bigUrl = $(this).find("img").attr("bigUrl");
            $(".smallImg,.bigImg").prop("src", bigUrl);
        })



        // 点击加入购物车
        // 谁?   买了什么东西?    买了多少件
        // 谁?            =>  当前登录的用户 
        // 买了什么东西?   =>  商品的相关信息(goodslist => 对应goodsId)
        // 买了几件        =>  $(".count-input").val();

        $(document).on("click", ".addToShoppingCar", async function () {

            // 谁? =>  当前登录的用户(判断用户是否登录) 
            var user = getCookie("lgc");
            if (user) { // 用户已登录  => 加入购物车(存数据库)
                var buyNum = $(".count-input").val()
                var result = await addToShoppingCar({ user, gid, buyNum });
                var { status, msg } = result;
                console.log(result);
                if (status) {
                    if (confirm("商品购买成功,是否进入购物车?")) {
                        location.href = "./shoppingCar.html";
                    }
                } else {
                    alert(msg);
                }


            } else { // 没有登录 => 去登录

                // 问题
                // 没有登录 => 去登录 => 登录成功(跳转主页 => 尴尬)

                // 解决方法啊?
                // 跳转登录页的同时,传递当前页的url作为 returnUrl, 登录成功再跳转回来

                location.href = "./login_account.html?returnUrl=" + encodeURIComponent(location.href)
            }

        })


    })



    function urlParse() {
        var search = location.search;
        var data = {};
        if (search) {  //从注册页跳转过来  => 有数据
            var str = search.substring(1);
            console.log(str);
            var list = str.split("&");
            // console.log(list);
            list.forEach(function (item) {
                var key = item.split("=")[0];
                var val = item.split("=")[1];
                data[key] = val;
            })
        }
        return data;
    }


    function exit() {
        deleteCookie("lgc");
        location.reload();
    }


</script>

</html>